<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <title></title>
    <style>
        .j10_left_control {
            /*width: 1245px;*/
            width: 1179px;
            height: 514px;
        }

        iframe {
            width: 50%;
            height: 50%;
            float: left;
            position: relative;
            border-left: 1px solid #e0e0e0;
            border-top: 1px solid #e0e0e0;
        }

        .big_item_box {
            border-left: 1px solid #e0e0e0;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

        .item_box, .big_item_box {
            width: 393px;
            /*height: 257px;*/
            height: 220px;
            float: left;
            margin-bottom: 37px;
        }

        .big_item_box video {
            width: 100%;
            height: 100%;
            float: none;
            position: relative;
            border: none;
        }
    </style>
</head>
<body style="overflow: hidden;">
<div class="j10_left_control fix">
    <div class="big_item_box">
      <video controls muted src="../../video/(1).mp4"></video>
    </div>
    <div class="big_item_box">
      <video controls muted src="../../video/(2).mp4"></video>
    </div>
    <div class="big_item_box" style="border-right: 1px solid #e0e0e0">
      <video controls muted src="../../video/(3).mp4"></video>
    </div>
    <div class="big_item_box">
      <video controls muted src="../../video/(4).mp4"></video>
    </div>
    <div class="big_item_box">
      <video controls muted src="../../video/(5).mp4"></video>
    </div>
    <div class="big_item_box" style="border-right: 1px solid #e0e0e0;">
      <video controls muted src="../../video/(6).mp4"></video>
    </div>
</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
	$(function () {
		/*let arr = [];
		let page = 0;
		for (let i = 0; i < 6; i++) {
			$('.j10_left_control').find('.big_item_box').eq(i).append(`<iframe src="" frameborder="0"></iframe>`)
		}

		$.ajax({
			type: 'post',
			url: 'http://172.16.3.123:6025/api/DATA-MANAGE/hk/artemis/getHls',
			data: JSON.stringify(['cfdae14c800b440b911058c339d8ecc4', 'ae4e24c1fb5c441da4d91653dabe0890', '343bf9508d0b430093434ca815420ac2', '5a39ec8ed3d64dee806d149c879866b7', 'fa41d34d74f34feb94d18f0f2aef476d', '80e8178b38c84ff1ba86163ca9dd650c', '91b395051b7b4e9bab795addc384f4c5', '60d2822ae0564bf3a32c6fc687d19a6d', 'd9441752bbd24a808c77f6f997c534a2', 'c179a2c3d330451786e28a5642b63d63', 'ea462a3c98bf4dc2af7a307cbd3d6c0b', '01329393231f4abeb24ee82cfe1c7b26']),
			dataType: 'json',
			contentType: 'application/json',
			success: function (res) {
				if (res.code === 200) {
					arr = res.data;
					loadVideo();
				}
			},
			error: function (msg) {

			}
		});


		function loadVideo() {
			$('.j10_left_control').find('.big_item_box').find('iframe').attr('src', '');
			if (page >= 2) {
				page = 0;
			}
			page++;
			setTimeout(() => {
				for (let i = 0; i < 6; i++) {
					$('.j10_left_control').find('.big_item_box').eq(i).find('iframe').attr('src', `http://172.16.3.123:6025/hls-test/player.html?stream=${arr[page * 6 + i]}&overflow-hidden=1`);
				}
			}, 50)
          setTimeout(()=>{
	          loadVideo()
          },1200000)
		}*/


		// getJson('api/DATA-MANAGE/hk/artemis/getHls', {}, function (res) {
		// 	if (res.code === 200) {
		// 		let arr = res.data;
		// 		for (let i = 0; i < 12; i++) {
		// 			$('.j10_left_control').append(`<iframe src="http://172.16.3.123:6025/hls-test/player.html?stream=${arr[i % arr.length]}&overflow-hidden=1"></iframe>`)
		// 		}
		// 	}
		// })

	})
</script>
</html>
